IPython Display - componentes no web
Componentes no web para agregar interactividad a Jupyter Notebook/Lab.
Contenidos
- 1. Antes de: principales errores
- 2. Diferencias Jupyter Notebook/Lab y Google Colab
- 3 Imágenes
- 4 Video
- 5 Audio
- 6 Código o Texto
- Enfasis
- Otros
- 7 Otros
- 8. Sin representación gráfica directa
- 3. Enlaces
Probaremos los siguientes:
-
Imágenes
- SVG
- Image
-
Video
- Video
- VimeoVideo
- YoutubeVideo
-
Audio
- Audio
-
Texto o Código
- Code
- FileLink y FileLinks
- Javascript
- Latex
- Markdown
- Math
- Scribd Document
-
Otros
- JSON
- GEOJSon
- TextDisplayObject
- DisplayObject
- DisplayHandle
- Pretty
1. Antes de: principales errores
Mi principal aprendizaje es que lo que se genera son objetos de distintos tipos. Los objetos no se muestran por defecto. Si el objeto es el resultado de la celda, el objeto se despliega por defecto. Sino es el resultado de la celda, no se muestra.
Es posible mostrar uno o varios objetos, con la función display. Display funciona en jupyter notebook/lab, pero no en python o IPython.
from IPython.display import Audio
Audio("http://www.w3schools.com/html/horse.ogg")
from IPython.display import Audio
a = Audio("http://www.w3schools.com/html/horse.ogg")
from IPython.display import Audio, display
a = Audio("http://www.w3schools.com/html/horse.ogg")
display(a)
from IPython.display import Audio, Image, display
a = Audio("http://www.w3schools.com/html/horse.ogg")
i1 = Image(filename="2021-05-ipython-display/Python.png", width=100)
i2 = Image(filename="2021-05-ipython-display/Python.jpg", width=150)
display(a,i1,i2)
3.1 Image
Image(data=None,
url=None,
filename=None,
format=None,
embed=None,
width=None,
height=None,
retina=False,
unconfined=False,
metadata=None)
Métodos o atributos del objeto creado:
- metadata: Atributo string con la metadata con la que fue creado el objeto.
- reaload: Método para recargar el contenido del objeto, si fue creado desde url o archivo.
from IPython.display import Image
Image(filename="2021-05-ipython-display/Python.png", width=100)
from IPython.display import Image
Image(filename="2021-05-ipython-display/Python.jpg", width=150)
from IPython.display import Image
Image(filename="2021-05-ipython-display/Python.gif", width=100)
from IPython.display import Image
my_url = "https://raw.githubusercontent.com/sebastiandres/2021-05-IPython-display/master/images/Python.png"
Image(url=my_url, width=100)
from IPython.display import Image
import numpy as np
my_data = ""
a = Image(data=my_data)
Más información
from IPython.display import Image
Image?
2.18 SVG
class IPython.display.SVG(data=None,
url=None,
filename=None,
metadata=None)
Un objeto SVG creado tiene los siguientes métodos o atributos:
- data: Entrega los datos del SVG.
- metadata: String con la metadata proporcionada en la creación.
- reload: Método para recargar el SVG, si fue creado por url o filename.
from IPython.display import SVG
SVG(filename="2021-05-ipython-display/Python.svg")
from IPython.display import SVG
SVG(url="https://raw.githubusercontent.com/sebastiandres/2021-05-IPython-display/master/images/Python.svg")
from IPython.display import SVG, display
data = '<svg height="109.8461" id="svg2169" inkscape:output_extension="org.inkscape.output.svg.inkscape" inkscape:version="0.45.1" sodipodi:docbase="/home/bene/Desktop" sodipodi:docname="dessin-1.svg" sodipodi:version="0.32" version="1.0" width="110.4211" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://web.resource.org/cc/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">\n <defs id="defs2171">\n <linearGradient id="linearGradient11301" inkscape:collect="always">\n <stop id="stop11303" offset="0" style="stop-color:#ffe052;stop-opacity:1"/>\n <stop id="stop11305" offset="1" style="stop-color:#ffc331;stop-opacity:1"/>\n </linearGradient>\n <linearGradient gradientUnits="userSpaceOnUse" id="linearGradient11307" inkscape:collect="always" x1="89.136749" x2="147.77737" xlink:href="#linearGradient11301" y1="111.92053" y2="168.1012"/>\n <linearGradient id="linearGradient9515" inkscape:collect="always">\n <stop id="stop9517" offset="0" style="stop-color:#387eb8;stop-opacity:1"/>\n <stop id="stop9519" offset="1" style="stop-color:#366994;stop-opacity:1"/>\n </linearGradient>\n <linearGradient gradientUnits="userSpaceOnUse" id="linearGradient9521" inkscape:collect="always" x1="55.549179" x2="110.14919" xlink:href="#linearGradient9515" y1="77.070274" y2="131.85291"/>\n </defs>\n <sodipodi:namedview bordercolor="#666666" borderopacity="1.0" height="184.25197px" id="base" inkscape:current-layer="layer1" inkscape:cx="-260.46312" inkscape:cy="316.02744" inkscape:document-units="px" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:window-height="624" inkscape:window-width="872" inkscape:window-x="5" inkscape:window-y="48" inkscape:zoom="0.24748737" pagecolor="#ffffff" width="131.10236px"/>\n <metadata id="metadata2174">\n <rdf:RDF>\n <cc:Work rdf:about="">\n <dc:format>image/svg+xml</dc:format>\n <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>\n </cc:Work>\n </rdf:RDF>\n </metadata>\n <g id="layer1" inkscape:groupmode="layer" inkscape:label="Calque 1" transform="translate(-473.36088,-251.72485)">\n <g id="g1894" transform="translate(428.42338,184.2561)">\n <path d="M 99.75,67.46875 C 71.718268,67.468752 73.46875,79.625 73.46875,79.625 L 73.5,92.21875 L 100.25,92.21875 L 100.25,96 L 62.875,96 C 62.875,96 44.9375,93.965724 44.9375,122.25 C 44.937498,150.53427 60.59375,149.53125 60.59375,149.53125 L 69.9375,149.53125 L 69.9375,136.40625 C 69.9375,136.40625 69.433848,120.75 85.34375,120.75 C 101.25365,120.75 111.875,120.75 111.875,120.75 C 111.875,120.75 126.78125,120.99096 126.78125,106.34375 C 126.78125,91.696544 126.78125,82.125 126.78125,82.125 C 126.78125,82.124998 129.04443,67.46875 99.75,67.46875 z M 85,75.9375 C 87.661429,75.937498 89.8125,78.088571 89.8125,80.75 C 89.812502,83.411429 87.661429,85.5625 85,85.5625 C 82.338571,85.562502 80.1875,83.411429 80.1875,80.75 C 80.187498,78.088571 82.338571,75.9375 85,75.9375 z " id="path8615" style="opacity:1;color:#000000;fill:url(#linearGradient9521);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible"/>\n <path d="M 100.5461,177.31485 C 128.57784,177.31485 126.82735,165.1586 126.82735,165.1586 L 126.7961,152.56485 L 100.0461,152.56485 L 100.0461,148.7836 L 137.4211,148.7836 C 137.4211,148.7836 155.3586,150.81787 155.3586,122.53359 C 155.35861,94.249323 139.70235,95.252343 139.70235,95.252343 L 130.3586,95.252343 L 130.3586,108.37734 C 130.3586,108.37734 130.86226,124.03359 114.95235,124.03359 C 99.042448,124.03359 88.421098,124.03359 88.421098,124.03359 C 88.421098,124.03359 73.514848,123.79263 73.514848,138.43985 C 73.514848,153.08705 73.514848,162.6586 73.514848,162.6586 C 73.514848,162.6586 71.251668,177.31485 100.5461,177.31485 z M 115.2961,168.8461 C 112.63467,168.8461 110.4836,166.69503 110.4836,164.0336 C 110.4836,161.37217 112.63467,159.2211 115.2961,159.2211 C 117.95753,159.2211 120.1086,161.37217 120.1086,164.0336 C 120.10861,166.69503 117.95753,168.8461 115.2961,168.8461 z " id="path8620" style="opacity:1;color:#000000;fill:url(#linearGradient11307);fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;marker:none;marker-start:none;marker-mid:none;marker-end:none;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;visibility:visible;display:inline;overflow:visible"/>\n </g>\n </g>\n</svg>'
my_svg = SVG(data=data, metadata = "SVG creado por datos")
display(my_svg)
print(my_svg.metadata)
Más información:
from IPython.display import SVG
SVG?
from IPython.display import Video
Video("2021-05-ipython-display/Python.webm",
width=600,
height=400)
from IPython.display import Video
Video("https://upload.wikimedia.org/wikipedia/commons/transcoded/b/b4/Ball_python_%28Python_regius%29_in_a_zoo.webm/Ball_python_%28Python_regius%29_in_a_zoo.webm.1080p.vp9.webm",
width=600,
height=400)
from IPython.display import Video
Video('2021-05-ipython-display/Python.webm', embed=True, html_attributes="no-controls muted autoplay", width=600, height=400)